<template>
    <el-container>
        <el-aside width="200">
            <el-radio-group v-model="selectedRadioValue" size="default" style="flex-direction: column;" :border="false">
                <el-radio-button label="知识文档" value="doc" />
                <el-radio-button label="知识文本" value="text" />
                <el-radio-button label="知识片段" value="segment" />
            </el-radio-group>
        </el-aside>
        <el-main>
            <KnowledgeDocList v-if="selectedRadioValue === 'doc'" :knowledgeSetId="props.id">
            </KnowledgeDocList>
            <KnowledgeTextList v-else-if="selectedRadioValue === 'text'" :knowledgeSetId="props.id">
            </KnowledgeTextList>
            <KnowledgeSegmentList v-else-if="selectedRadioValue === 'segment'" :knowledgeSetId="props.id">
            </KnowledgeSegmentList>
        </el-main>
    </el-container>
</template>
<script setup lang="js">
import { ref, watch } from 'vue';
import KnowledgeDocList from './KnowledgeDocList.vue';
import KnowledgeTextList from './KnowledgeTextList.vue';
import KnowledgeSegmentList from './KnowledgeSegmentList.vue';
const props = defineProps({
    id: {
        type: Number,
        required: true
    }
});
const selectedRadioValue = ref('doc');

watch(() => props.id, (newId) => {
    currentData.value.id = newId;
});
const currentData = ref({ id: -1 })
const knowledgeSetList = ref([])

</script>
<style lang="scss" scoped>
.el-aside {
    border-right: 1px solid #ebeef5;
    background-color: #fff;

    :deep() {
        .el-radio-button__inner {
            width: 100%;
            border: 0px;
            border-radius: 0px;
        }
    }

}
</style>